<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" th:href="@{/img/apple.png}"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}" />
    <title>标签管理</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    <header class="bg-dark sticky-top" th:replace="index::header">
        <div class="container">
            <!-- 导航 -->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <!-- logo -->
                <a class="navbar-brand" href="#"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- 功能 -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" href="../index.html">首页</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" href="register.html">注册</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" href="login.html">登录</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                                <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                                <a class="dropdown-item text-center" href="login.html">退出登录</a>
                                <div class="dropdown-divider"></div>
                                <span class="dropdown-item text-center text-secondary">nowcoder</span>
                            </div>
                        </li>
                    </ul>
                    <!-- 搜索 -->
                    <form class="form-inline my-2 my-lg-0" action="search.html">
                        <input class="form-control mr-sm-2" type="search" aria-label="Search" />
                        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </div>
            </nav>
        </div>
    </header>

    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <form class="form-inline" action="" method="get" id="queryForm">
                <label for="tagName" class="mb-2 mr-sm-2">标签名</label>
                <input type="text" class="form-control mb-2 mr-sm-2" th:value="${param.tag}"
                       id="tagName" placeholder="" name="tagName">
                <label for="entityType" class="mb-2 mr-sm-2">类别：</label>
                <select class="form-control mb-2 mr-sm-2"
                        id="entityType" name="entityType">
                    <option value="-1">请选择</option>
                    <option value="1">帖子标签</option>
                    <option value="3">用户标签</option>
                </select>

                <button type="reset" class="btn btn-secondary mb-2 ">重置</button>&nbsp;&nbsp;&nbsp;
                <button type="button" id="query" onclick="queryTags()" class="btn btn-primary mb-2 pull-right" >查询</button>
            </form>
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>标签名</th>
                    <th>状态</th>
                    <th >标签类别</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="tag:${tags}">
                    <td th:text="${tag.id}">01</td>
                    <td th:text="${tag.tagName}">标签名</td>
                    <td th:text="${tag.status==1?'禁用':'使用'}">状态</td>
                    <td th:text="${tag.entityType==3?'用户标签':'帖子标签'}">标签类别</td>
                    <td th:text="${#dates.format(tag.createTime,'yyyy-MM-dd HH:mm:ss')}">创建时间</td>
                    <td>
                        <button type="button" class="btn btn-light btn-xm" id="setId"  th:onclick="setId([[${tag.id}]])"
                                data-toggle="modal" data-target="#myModal">
                            <span class="glyphicon glyphicon-pencil"></span> 修改
                        </button>
                        <input type="hidden" th:value="${tag.id}" th:id="|id${tag.id}|">
                        <input type="hidden" th:value="${tag.status}" th:id="|status${tag.id}|">
                        <button type="button"
                                th:text="${tag.status==0?'禁用':'使用'}"
                                th:class="|btn ${tag.status==0?'btn-danger':'btn-default'} btn-xm|"
                                id="delete" th:onclick="deleteId([[${tag.id}]])">
                            <span class="glyphicon glyphicon-trash"></span> 删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <!-- 分页 -->
            <nav class="mt-5" th:replace="index::pagination">
                <ul class="pagination justify-content-center">
                    <li class="page-item"><a class="page-link" href="#">首页</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">末页</a></li>
                </ul>
            </nav>

            <!--修改信息-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">
                                修改信息
                            </h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                        </div>
                        <div class="modal-body">

                            <form class="form-horizontal" role="form" th:action="@{/setTag}" method="post">
                                <input type="hidden" name="id" id="tagId" >
                                <div class="form-group">
                                    <label for="fixTag" class="mb-2 mr-sm-2">标签名:</label>
                                    <input type="text" class="form-control mb-2 mr-sm-2"
                                           id="fixTag" placeholder="" name="tagName">
                                </div>
                                <div class="form-group">
                                    <label for="entityType" class="mb-2 mr-sm-2">标签类别:</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio"
                                               name="entityType" id="exampleRadios2" value="3">
                                        <label class="form-check-label" for="exampleRadios2">
                                            用户标签
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio"
                                               name="entityType" id="exampleRadios1" value="1" checked>
                                        <label class="form-check-label" for="exampleRadios1">
                                            帖子标签
                                        </label>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        确认更改
                                    </button>
                                </div>

                            </form>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 尾部 -->

</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/tagList.js}"></script>

</body>
</html>